<template>
  <div class="virtual-tree">
    <div class="data-json mb-10">
      <p class="title">1.利用css 的伪元素::after + transfrom 进行缩放border 1px</p>
      <!--组件 -->
      <base-border></base-border>
    </div>
    <div class="data-json mb-10">
      <p class="title">2.如何实现一个高性能可渲染大数据的Tree组件</p>
      <!--组件 -->
      <base-tree :tree="treeData" :option="option"></base-tree>
    </div>
  </div>
</template>

<script>
import { getVirtualTreeData } from "@/api/service.js";
import BaseTree from "@components/iv-tree/BaseTree.vue";
import BaseBorder from "@components/iv-border/BaseBorder.vue";
export default {
  name: "VirtualTree",
  components: {
    BaseTree,
    BaseBorder
  },
  data() {
    return {
      treeData: [],
      option: {
        itemHeight: 5,
        visibleCount: 20
      }
    };
  },
  methods: {
    async getVirtualTreeData() {
      const [err, data] = await getVirtualTreeData({});
      if (err) {
        let msg = err.message || "请求数据异常";
        this.$Message.error(err);
        return;
      }
      this.treeData = data;
    }
  },
  mounted() {
    this.getVirtualTreeData();
  }
};
</script>

<style lang="stylus" scoped>
.virtual-tree {
}
</style>
